<template>
    <div class="body">
        <div class="title">
            <span class="iconfont icon-fanhui fanhui"></span>
            <span>我的订单</span>
            <span class="iconfont icon-fangdajing fdj"></span>
        </div>
        <div class="option">
            <ul>
                <li class="active"><a>全部</a></li>
                <li><a>待付款</a></li>
                <li><a>待收货</a></li>
                <li><a>退款订单</a></li>
                <li><a>已收货</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="order">
                <div class="tit">
                    <span class="shop">轩逸自营</span>
                    <span class="state">待付款</span>
                </div>
                <div class="goods">
                    <div class="one">
                        <div class="pic">
                            <img src="../assets/image/wq/sp2.png">
                        </div>
                        <div class="const">
                            <p class="const-tit">样子103°人体工学套装</p>
                            <p class="const-des">木色无收纳床头1.8m不可收大床箱 床+床头柜*2</p>
                        </div>
                        <div class="last">
                            <p>
                                <span>￥</span>
                                <span>3599.00</span>
                            </p>
                            <p class="goods-num">x1</p>
                        </div>
                    </div>
                    <div class="one">
                        <div class="pic">
                            <img src="../assets/image/wq/sp2.png">
                        </div>
                        <div class="const">
                            <p class="const-tit">样子103°人体工学套装</p>
                            <p class="const-des">木色无收纳床头1.8m不可收大床箱 床+床头柜*2</p>
                        </div>
                        <div class="last">
                            <p>
                                <span>￥</span>
                                <span>3599.00</span>
                            </p>
                            <p class="goods-num">x1</p>
                        </div>
                    </div>
                </div>
                <div class="gross">
                    <p>
                        共<span>1</span>件商品，总金额 <span class="gross-unit">￥</span><span class="gross-pri">99</span><span class="dec">.00</span>
                    </p>
                </div>
                <div class="btn-com">
                    <div class="del-btn"><span>删除订单</span></div>
                    <div class="again-btn">再次购买</div>
                </div>
            </div>
            <div class="order">
                <div class="tit">
                    <span class="shop">轩逸自营</span>
                    <span class="state">确认收货</span>
                </div>
                <div class="goods">
                    <div class="one">
                        <div class="pic">
                            <img src="../assets/image/wq/sp2.png">
                        </div>
                        <div class="const">
                            <p class="const-tit">样子103°人体工学套装</p>
                            <p class="const-des">木色无收纳床头1.8m不可收大床箱 床+床头柜*2</p>
                        </div>
                        <div class="last">
                            <p>
                                <span>￥</span>
                                <span>3599.00</span>
                            </p>
                            <p class="goods-num">x1</p>
                        </div>
                    </div>
                    <div class="one">
                        <div class="pic">
                            <img src="../assets/image/wq/sp2.png">
                        </div>
                        <div class="const">
                            <p class="const-tit">样子103°人体工学套装</p>
                            <p class="const-des">木色无收纳床头1.8m不可收大床箱 床+床头柜*2</p>
                        </div>
                        <div class="last">
                            <p>
                                <span>￥</span>
                                <span>3599.00</span>
                            </p>
                            <p class="goods-num">x1</p>
                        </div>
                    </div>
                </div>
                <div class="gross">
                    <p>
                        共<span>1</span>件商品，总金额 <span class="gross-unit">￥</span><span class="gross-pri">99</span><span class="dec">.00</span>
                    </p>
                </div>
                <div class="btn-com">
                    <div class="del-btn"><span>删除订单</span></div>
                    <div class="again-btn">确认收货</div>
                    <div class="check-btn">查看物流</div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    window.onload = window.onresize = function () {
        document.documentElement.style.fontSize = 37.5 * document.documentElement.clientWidth / 375 + 'px';
    };
    export default {
        name: "Order"
    }
</script>

<style scoped lang="less">
    @baseFont: 37.5;
    html {
        padding: 0;
        margin: 0;
        font-size: @baseFont*1px;
        background: #f4f4f4;
    }

    .px2rem(@name,@px) {
            @{name}: @px/@baseFont/2*1rem;
    }

    .body {
        background: #f4f4f4;
        .px2rem(padding-left, 20);
        .px2rem(padding-right, 20);
    }

    .title {
        text-align: center;
        span{
            .px2rem(font-size,30)
        }
        .fanhui {
            position: absolute;
            .px2rem(left,20);
            .px2rem(top,40)
        }
        .fdj {
            .px2rem(font-size,40);
            position: absolute;
            .px2rem(right,20);
            .px2rem(top,38)
        }
    }

    .option {
        overflow: hidden;
        .px2rem(height, 120);
        ul {
            display: flex;
            li {
                flex: 1;
                text-align: center;
                .px2rem(font-size,25);
                .px2rem(margin-right,35);
                .px2rem(margin-top, 50);
                .px2rem(height, 45);
                .px2rem(line-height, 45);
                .px2rem(border-radius,20);
            }
            li:first-child{
                background: #dfb455;
                color: white;
            }
            li:nth-child(4){
                flex: 1.5;
            }
            li:last-child{
                .px2rem(margin-right,0);
            }
        }
    }

    .order{
        overflow: hidden;
        background: white;
        .px2rem(padding-top,30);
        .px2rem(padding-bottom,20);
        .px2rem(padding-right,20);
        .px2rem(padding-left,20);
        .px2rem(border-radius,15);
        .px2rem(margin-bottom,20);
        .tit{
            .px2rem(margin-bottom,50);
            span{
                .px2rem(font-size,25)
            }
            .shop{
                font-weight: bold;
                float: left;
            }
            .state{
                float: right;
                color: #c1c1c1;
            }
        }
        .goods{
            .one{
                .px2rem(height,180);
                .px2rem(margin-bottom,20);
                .pic{
                    float: left;
                    img{
                        .px2rem(width,180);
                        .px2rem(height,180)
                    }
                }
                .const{
                    float: left;
                    .px2rem(height,180);
                    .px2rem(margin-left,20);
                    .px2rem(width,280);
                    .const-tit{
                        .px2rem(font-size,25);
                        font-weight: bold;
                    }
                    .const-des{
                        color: #a1a1a1;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        .px2rem(font-size,18);
                        .px2rem(margin-top,20)
                    }
                }
                .last{
                    float: right;
                    color: #a1a1a1;
                    .px2rem(font-size,25);
                    .goods-num{
                        .px2rem(margin-top,20);
                        float: right;
                    }
                }
            }
        }
        .gross{
            overflow: hidden;
            p{
                float: right;
                .px2rem(font-size,25);
                .gross-unit{
                    .px2rem(font-size,20)
                }
                .gross-pri{
                    .px2rem(font-size,37.5);
                    font-weight: 500;
                }
                .dec{
                    .px2rem(font-size,20)
                }
            }
        }
        .btn-com{
            .px2rem(margin-top,40);
            .px2rem(height,55);
            .px2rem(font-size,25);
            .px2rem(line-height,55);
            .del-btn{
                display: inline-block;
                color: #a1a1a1;
            }
            .check-btn{
                float: right;
                box-sizing: border-box;
                text-align: center;
                border: #a1a1a1 1px solid;
                .px2rem(width,150);
                .px2rem(height,55);
                color: #a1a1a1;
                .px2rem(border-radius,35);
                .px2rem(margin-right,20)
            }
            .again-btn{
                float: right;
                box-sizing: border-box;
                text-align: center;
                border: #cd5051 1px solid;
                .px2rem(width,150);
                .px2rem(height,55);
                text-align: center;
                color: #cd5051;
                .px2rem(border-radius,35)
            }

        }
    }
</style>
<style src="../assets/font/iconfont.css"></style>